<template>
  <div>
    <el-container class="nav">
      <el-aside width="200px">
        <el-col>
          <el-menu
              default-active="this.$route.path"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#fff"
              text-color="#775637"
              active-text-color="#ffd04b"
              router
          >
            <el-menu-item :index="item.path" v-for="item in asideMenu" :key="item.path">
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>

      <el-container>
        <el-main>
          <router-view>
          </router-view>
        </el-main>
      </el-container>

    </el-container>

  </div>

</template>

<script>
import Law from "@/components/regulations/Law";

export default {
  created() {

  },

  data() {
    return {
      asideMenu: [{
        path: "/main/law",
        title: "法律"
      },
        {
          path: "/main/thammasat",
          title: "行政法规"
        },
        {
          path: "/main/departmental",
          title: "部门规章"
        },
        {
          path: "/main/LocalNGovernment",
          title: "地方性法规和政府规章"
        },]
    }
  },


  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    }
    ,
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}


</script>

<style>

.nav {
  height: 500px;
  width: 1200px;
  margin-left: 160px;
  border: 1px solid #775637;
}

.el-menu-item {
  background: url("../../assets/images/u22.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
}

.el-aside {
  background-color: gainsboro;
  color: #333;
  line-height: 200px;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
}

</style>